<template>
  <div>
    <n-space>
      <n-button type="primary" @click="onInsert">新增</n-button>
    </n-space>
    <n-grid x-gap="12" :cols="4" class="mt30">
      <n-gi v-for="item in banners" :key="item.id">
        <n-card>
          <template #cover>
            <img class="images cp" :src="VITE_GLOB_FILE_URL + item.files" @click="onEdit(item)" />
          </template>
        </n-card>
      </n-gi>
    </n-grid>

    <n-modal v-model:show="fileShow" preset="dialog" title="选择图片">
      <n-form ref="formRef" :label-width="80" :model="formValue">
        <n-form-item label="选择图片">
          <UploadSettingImage
            :data="VITE_GLOB_FILE_URL + formValue.files"
            @upload-file-change="uploadFileChange"
          />
        </n-form-item>
        <n-form-item label="跳转类型">
          <n-radio-group v-model:value="formValue.path_type" name="status">
            <n-space>
              <n-radio value="course">课程</n-radio>
              <n-radio value="column">专栏</n-radio>
              <n-radio value="activity">微页面</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="跳转地址">
          <n-button size="tiny" type="info" @click="onSelect"> 选择 </n-button>
        </n-form-item>
        <n-form-item>
          <div>{{ formValue.title }}</div>
        </n-form-item>
        <n-form-item>
          <n-button attr-type="button" @click="formSubmit"> 保存 </n-button>
        </n-form-item>
      </n-form>
    </n-modal>

    <n-modal
      v-model:show="showModal"
      :show-icon="false"
      preset="dialog"
      title="选择课程"
      style="width: 600px"
    >
      <SelectColumn @on-select-column="onSelectColumn" />
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { patchSetting, postSetting, putSetting } from '@/api/setting/setting';
  import UploadSettingImage from '@/components/uploadSettingImage.vue';
  import { useMessage } from 'naive-ui';
  import { ResultEnum } from '@/enums/httpEnum';
  import SelectColumn from '@/components/selectColumn.vue';

  interface banner {
    id: number;
    type: string;
    title: string;
    path_type: string;
    path: string;
    files: string;
  }

  const VITE_GLOB_FILE_URL = import.meta.env.VITE_GLOB_FILE_URL;
  const banners = ref<banner[]>([]);
  const formValue = ref<banner>({
    id: 0,
    type: 'banner',
    title: '',
    files: '',
    path_type: '',
    path: '',
  });
  const showModal = ref(false);
  const fileShow = ref(false);
  const formRef: any = ref(null);
  const message = useMessage();

  const onInsert = () => {
    formValue.value.id = 0;
    formValue.value.files = '';
    fileShow.value = true;
  };

  const onEdit = (data) => {
    formValue.value = data;
    fileShow.value = true;
  };

  const uploadFileChange = (data) => {
    formValue.value.files = data;
  };

  function formSubmit() {
    formRef.value.validate(async (errors) => {
      if (!errors) {
        try {
          let response: any = null;
          if (formValue.value.id == 0) {
            response = await putSetting(formValue.value);
          } else {
            response = await patchSetting(formValue.value);
          }

          if (response.code === ResultEnum.SUCCESS) {
            message.success(response.message);
            fileShow.value = false;
            getData();
          }
        } finally {
          // loading.value = false;
        }
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }

  const getData = async () => {
    const response: any = await postSetting(formValue.value);
    banners.value = response.result;
  };

  onMounted(() => {
    getData();
  });

  const onSelect = () => {
    if (formValue.value.path_type == 'column') {
      showModal.value = true;
    }
  };

  const onSelectColumn = (data) => {
    formValue.value.path = data.id;
    formValue.value.title = data.title;
    showModal.value = false;
    getData();
  };
</script>
<style scoped>
  .images {
    width: 200px !important;
  }
</style>
